<template>
    <div class="Home">
        <!-- 对应的组件内容渲染到router-view中 -->
        <div class="routerView">
            <router-view></router-view>
        </div>
        <van-tabbar v-model="active">
            <!-- router-link 定义点击后导航到哪个路径下 -->
            <van-tabbar-item name="index" icon="home-o">
                <router-link to="/index">首页</router-link>
            </van-tabbar-item>
            <van-tabbar-item name="recommend" icon="search">
                <router-link to="/recommend">推荐</router-link>
            </van-tabbar-item>
            <van-tabbar-item name="search" icon="search">
                <router-link to="/search">搜索</router-link>
            </van-tabbar-item>
            <van-tabbar-item name="friends" icon="friends-o">
                <router-link to="/shoppingCart">购物车</router-link>
            </van-tabbar-item>
            <van-tabbar-item name="setting" icon="setting-o">
                <router-link to="/my">我的</router-link>
            </van-tabbar-item>
        </van-tabbar>
    </div>
</template>

<script>
    export default {
        name: "Home",
        data() {
            return {
                active: 'index',
            };
        }
    }
</script>

<style scoped>

    .Home{
        background: #EDEDED;
        width: 100%;
        height: 100%;
        overflow: hidden;
    }

    .routerView{
        width: 100%;
        height: 96.5%;
        overflow-y: auto;
        overflow-x: hidden;
    }
</style>